<template>
  <div class="center">
    <div class="card">
      <img src="@/assets/images/ic_my_data.png" alt="">
      <div class="photo">
        <img src="@/assets/logo.png" alt="">
      </div>
      <div class="name">
        <span>鱼辣</span>
        <span>生产队</span>
        <span>ID:1000001</span>
      </div>
      <div class="tip">
        <img src="@/assets/images/ic_my_plan.png" alt="" @click="growthPlan">
      </div>
      <div class="number">
        <div class="div1">
          <span>38</span>
          <span>总工分</span>
        </div>
        <div class="div2">
          <span>2</span>
          <span>累计推广人数</span>
        </div>
        <div class="div3">
          <span>1024</span>
          <span>累计推广商户数</span>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="ul">
      <div class="li">
        <div class="left">
          <div class="img"><img class="img1" src="@/assets/images/ic_my_workpoints.png" alt=""></div>
          <span>我的工分</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li">
        <div class="left">
          <div class="img"><img class="img2" src="@/assets/images/ic_my_promote.png" alt=""></div>
          <span>我的推广</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li">
        <div class="left">
          <div class="img"><img class="img3" src="@/assets/images/ic_my_wallet.png" alt=""></div>
          <span>我的钱包</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li">
        <div class="left">
          <div class="img"><img class="img4" src="@/assets/images/ic_my_prize.png" alt=""></div>
          <span>我的奖品</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="li">
        <div class="left">
          <div class="img"><img class="img5" src="@/assets/images/ic_my_address.png" alt=""></div>
          <span>收货地址</span>
        </div>
        <img class="iconAll" src="@/assets/images/ic_right.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/8 0008 17:01.
     */

    export default {
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {}
        },
        computed: {},
        methods: {
          /**
           * 成长计划
           */
          growthPlan(){
            this.$router.push({path:'/growthPlan'})
          }
        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .center{
    width: 100%;
    overflow: hidden;
    .card{
      width: 7rem;
      height: 3.55rem;
      margin: 0.25rem 0.25rem;
      position: relative;
      img{
        position: absolute;
        top: 0;
        left: 0;
        width: 7rem;
        height: 3.55rem;
        z-index: 0;
      }
      .photo{
        width: 0.92rem;
        height: 0.92rem;
        border: 2px solid #fff;
        position: absolute;
        border-radius: 50%;
        top: 0.72rem;
        left: 0.62rem;
        z-index: 99;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        width: 2.8rem;
        position: absolute;
        top: 0.64rem;
        left: 1.78rem;
        z-index: 99;
        display: flex;
        flex-direction: column;
        span{
          text-align: left;
          font-size: 0.26rem;
          color: #FFFFFF;
          margin-bottom: 0.08rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        span:first-child{
          font-size: 0.3rem;
        }
      }
      .tip{
        position: absolute;
        top: 0.93rem;
        right: 2.7rem;
        img{
          width: 2.46rem;
          height: 0.58rem;
        }
      }
      .number{
        width: 100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        position: absolute;
        bottom: 0.4rem;
        display: flex;
        justify-content: space-between;
         div{
          width: 2.4rem;
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 0.3rem;
          color: #fff;

          span:first-child{
            margin-bottom: 0.22rem;
          }
        }
        .div1{
          width: 1.5rem;
        }
        .div2{
          width: 2.4rem;
        }
        .div3{
          width: 3rem;
        }
      }
    }
    .line{
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }
    .ul{
      width: 100%;
      padding-left: 0.4rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .li{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 0.96rem;
        border-bottom: 1px solid #F6F6F6;
        font-size: 0.3rem;
        .left{
          display: flex;
          align-items: center;
          span{
            margin-left: 0.2rem;
          }
          .img{
            width: 0.66rem;
            display: flex;
            justify-content: center;
          }
          .img1{
            width: 0.31rem;
            height: 0.4rem;
          }
          .img2{
            width: 0.44rem;
            height: 0.37rem;
          }
          .img3{
            width: 0.4rem;
            height: 0.38rem;
          }
          .img4{
            width: 0.42rem;
            height: 0.42rem;
          }
          .img5{
            width: 0.44rem;
            height: 0.44rem;
          }
        }
        .iconAll{
          width: 0.1rem;
          height: 0.2rem;
          margin-right: 0.4rem;
        }
      }
    }
  }

</style>
